<template>
	<div class="deploy-dialog">
		<el-dialog
			:title="dialogTitle"
			:show-close="false"
			:close-on-click-modal="false"
			:visible.sync="visible"
			width="75%"
			@close="closeHandle"
		>
			<el-form
				label-position="right"
				ref="modelFormRef"
				label-width="105px"
				:model="modelForm"
			>
				<el-form-item
					label="部署ID"
					prop="deployId"
					:rules="{
						required: true,
						message: '请输入部署ID',
						trigger: ['blur', 'change'],
					}"
				>
					<el-input
						v-model="modelForm.deployId"
						placeholder="请输入"
						style="max-width: 50%"
						@input="deployIdInput"
					/>
				</el-form-item>
				<el-form-item
					label="部署环境"
					prop="env"
					:rules="{
						required: true,
						message: '请选择部署环境',
						trigger: 'blur',
					}"
				>
					<el-select
						v-model="modelForm.env"
						placeholder="请选择"
						class="env-select"
						style="max-width: 50%"
						@change="envChange"
					>
						<el-option
							v-for="item in envOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="部署描述"
					prop="info"
					:rules="{
						required: true,
						message: '请输入部署描述',
						trigger: ['blur', 'change'],
					}"
				>
					<el-input
						v-model="modelForm.info"
						type="textarea"
						style="max-width: 50%"
					/>
				</el-form-item>
			</el-form>
			<div v-if="modelForm.env && modelForm.deployId">
				<DeployTable
					ref="DeployTable"
					:env="modelForm.env"
					:deployId="modelForm.deployId"
					:deployTypeOptions="deployTypeOptions"
					:envOptions="envOptions"
					@handleSelectionChange="handleSelectionChange"
				/>
			</div>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="dialogHandle('cancel')">取 消</el-button>
				<el-button
					type="primary"
					@click="dialogHandle('confirm')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { systemDictDataType } from '@/api/pipeline/pipeline-execution';
import DeployTable from './table.vue';

export default {
	name: 'deployDialog',
	components: {
		DeployTable,
	},
	props: {
		dialogType: {
			type: String,
			default: 'add',
		},
		id: [String, Number],
		deployTypeOptions: {
			type: Array,
			defualt: () => {
				return [];
			},
		},
	},
	computed: {
		dialogTitle() {
			return {
				add: '新增部署',
				edit: '修改部署',
			}[this.dialogType];
		},
	},
	data() {
		return {
			visible: true,
			modelForm: {
				deployId: undefined,
				deployType: undefined,
				info: '',
				tags: [],
			},
			parentIds: [],
			envOptions: [],
		};
	},
	async created() {
		this.loading = false;
		try {
			const { data } = await systemDictDataType({ type: 'env' });
			this.envOptions = data;
		} catch (error) {
			this.$message.error(error);
		}
	},
	methods: {
		closeHandle() {
			this.$emit('closeHandle');
		},
		dialogHandle(type) {
			switch (type) {
				case 'cancel':
					this.$emit('dialogHandle', type);
					break;
				case 'confirm':
					this.submitForm(type);
					break;
			}
		},
		// 提交表单
		submitForm(type) {
			this.$message.close();
			if (this.modelForm.tags.length > 0) {
				this.$refs.modelFormRef.validate(valid => {
					if (valid) {
						// 表单验证通过，处理提交逻辑
						console.log('表单数据:', this.modelForm);
						this.$message.success('提交成功');

						this.$emit('dialogHandle', type, this.modelForm);
					} else {
						this.$message.error('请填写完整表单');
						return false;
					}
				});
			} else {
				this.$message.error('请选择发包配置');
			}
		},
		deployIdInput() {
			if (this.modelForm.env && this.modelForm.deployId) {
				this.$nextTick(() => {
					this.$refs.DeployTable.getList();
				});
			}
		},
		envChange() {
			if (this.modelForm.env && this.modelForm.deployId) {
				this.$nextTick(() => {
					this.$refs.DeployTable.getList();
				});
			}
		},
		handleSelectionChange(val) {
			this.modelForm.tags = val.data;
			this.modelForm.deployType = val.deployType;
		},
	},
};
</script>

<style lang="scss" scoped>
.el-card {
	margin-bottom: 22px;

	.el-icon-close {
		float: right;
		height: 24px;
		line-height: 24px;
		cursor: pointer;
	}

	&-title {
		height: 24px;
		line-height: 24px;
	}

	// :deep(.el-card__body) {
	//   max-height: 200px;
	//   overflow: hidden;
	//   overflow-y: auto;
	// }
}

.env-select {
	width: 100%;
}
</style>
